<template>
    <view class="w-full flex items-center justify-around bg-white pt-5px pb-5px box-border rounded-b-2xl">
        <text class="h-25px text-sm font-bold border-0 border-b-2 text-yellow-400">全部</text>
        <text class="h-25px text-sm border-0 border-b-2 border-transparent text-gray-500">待付款</text>
        <text class="h-25px text-sm border-0 border-b-2 border-transparent text-gray-500">待取餐</text>
        <text class="h-25px text-sm border-0 border-b-2 border-transparent text-gray-500">已完成</text>
        <text class="h-25px text-sm border-0 border-b-2 border-transparent text-gray-500">退款售后</text>
    </view>
    <view class="width-95 ml-auto mr-auto bg-white rounded-md p-10px box-border mt-10px">
        <view
            class="w-full flex items-center justify-between border-0 border-b-1 border-gray-100 pt-5px pb-5px box-border">
            <view class="flex items-center">
                <text
                    class="inline-block border-1 border-yellow-400 text-xs text-yellow-400 pl-4px pr-4px rounded-sm">外带</text>
                <text class="text-sm font-bold ml-5px">华莱士·全鸡汉堡（天河车陂店）</text>
            </view>
            <text class="text-orange-500 text-sm">待取餐</text>
        </view>
        <view class="w-full h-90px pt-5px flex items-center justify-between">
            <view class="width-80 h-90px flex items-center overflow-x-auto">
                <view class="w-70px h-70px">
                    <image class="w-60px h-60px ml-5px" src="https://p0.meituan.net/deal/d3beb99ad92460554003268dfbcfd11594614.jpg@180w_164h_1e_1c" mode="aspectFill"></image>
                    <text class="w-full text-center text-xs line-clamp-1 text-gray-400">C121特惠单人餐</text>
                </view>
                <view class="w-70px h-70px">
                    <image class="w-60px h-60px ml-5px" src="https://p1.meituan.net/deal/1b3e896ae3ca22cc7f20c4325012f0d652210.jpg@180w_164h_1e_1c" mode="aspectFill"></image>
                    <text class="w-full text-center text-xs line-clamp-1 text-gray-400">经典重温 2-3 人餐</text>
                </view>
                <view class="w-70px h-70px">
                    <image class="w-60px h-60px ml-5px" src="https://p0.meituan.net/deal/9f71a60f1982e066767d8ddd513b80fc32720.jpg@180w_164h_1e_1c" mode="aspectFill"></image>
                    <text class="w-full text-center text-xs line-clamp-1 text-gray-400">红辣鸡排+中可</text>
                </view>
            </view>
            <text class="text-xs text-gray-400">共2件</text>
        </view>
        <view class="w-full flex items-center justify-between mt-10px">
            <text class="text-xs text-gray-500">下单时间：2022-10-11 11:30</text>
            <view class="flex items-end">
                <text class="text-xs text-gray-500 align-bottom">合计</text>
                <text class="text-xs text-black align-bottom">￥</text>
                <text class="text-xs text-black font-bold align-bottom">28</text>
            </view>
        </view>
    </view>
    <view class="width-95 ml-auto mr-auto bg-white rounded-md p-10px box-border mt-10px">
        <view
            class="w-full flex items-center justify-between border-0 border-b-1 border-gray-100 pt-5px pb-5px box-border">
            <view class="flex items-center">
                <text
                    class="inline-block border-1 border-yellow-400 text-xs text-yellow-400 pl-4px pr-4px rounded-sm">外带</text>
                <text class="text-sm font-bold ml-5px">华莱士·全鸡汉堡（天河车陂店）</text>
            </view>
            <text class="text-gray-500 text-sm">已完成</text>
        </view>
        <view class="w-full h-90px pt-5px flex items-center justify-between">
            <view class="width-80 h-90px flex items-center overflow-x-auto">
                <view class="w-70px h-70px">
                    <image class="w-60px h-60px ml-5px" src="https://p0.meituan.net/deal/0a0380c1d7bc3b68c978f1c5634e087464061.jpg@180w_164h_1e_1c" mode="aspectFill"></image>
                    <text class="w-full text-center text-xs line-clamp-1 text-gray-400">【宠粉专享】香辣鸡排堡</text>
                </view>
                <view class="w-70px h-70px">
                    <image class="w-60px h-60px ml-5px" src="https://p0.meituan.net/deal/edd369757df7a0d68d8efb1e0825348599160.jpg@180w_164h_1e_1c" mode="aspectFill"></image>
                    <text class="w-full text-center text-xs line-clamp-1 text-gray-400">【热卖】香辣鸡排堡三件套</text>
                </view>
            </view>
            <text class="text-xs text-gray-400">共2件</text>
        </view>
        <view class="w-full flex items-center justify-between mt-10px">
            <text class="text-xs text-gray-500">下单时间：2022-10-11 10:30</text>
            <view class="flex items-end">
                <text class="text-xs text-gray-500 align-bottom">合计</text>
                <text class="text-xs text-black align-bottom">￥</text>
                <text class="text-xs text-black font-bold align-bottom">14</text>
            </view>
        </view>
    </view>
    <view class="width-95 ml-auto mr-auto bg-white rounded-md p-10px box-border mt-10px">
        <view
            class="w-full flex items-center justify-between border-0 border-b-1 border-gray-100 pt-5px pb-5px box-border">
            <view class="flex items-center">
                <text
                    class="inline-block border-1 border-yellow-400 text-xs text-yellow-400 pl-4px pr-4px rounded-sm">外带</text>
                <text class="text-sm font-bold ml-5px">华莱士·全鸡汉堡（天河车陂店）</text>
            </view>
            <text class="text-gray-500 text-sm">已完成</text>
        </view>
        <view class="w-full h-90px pt-5px flex items-center justify-between">
            <view class="width-80 h-90px flex items-center overflow-x-auto">
                <view class="w-70px h-70px">
                    <image class="w-60px h-60px ml-5px" src="https://p0.meituan.net/deal/0a0380c1d7bc3b68c978f1c5634e087464061.jpg@180w_164h_1e_1c" mode="aspectFill"></image>
                    <text class="w-full text-center text-xs line-clamp-1 text-gray-400">【宠粉专享】香辣鸡排堡</text>
                </view>
                <view class="w-70px h-70px">
                    <image class="w-60px h-60px ml-5px" src="https://p0.meituan.net/deal/edd369757df7a0d68d8efb1e0825348599160.jpg@180w_164h_1e_1c" mode="aspectFill"></image>
                    <text class="w-full text-center text-xs line-clamp-1 text-gray-400">【热卖】香辣鸡排堡三件套</text>
                </view>
            </view>
            <text class="text-xs text-gray-400">共2件</text>
        </view>
        <view class="w-full flex items-center justify-between mt-10px">
            <text class="text-xs text-gray-500">下单时间：2022-10-11 10:30</text>
            <view class="flex items-end">
                <text class="text-xs text-gray-500 align-bottom">合计</text>
                <text class="text-xs text-black align-bottom">￥</text>
                <text class="text-xs text-black font-bold align-bottom">14</text>
            </view>
        </view>
    </view>
    <view class="width-95 ml-auto mr-auto bg-white rounded-md p-10px box-border mt-10px">
        <view
            class="w-full flex items-center justify-between border-0 border-b-1 border-gray-100 pt-5px pb-5px box-border">
            <view class="flex items-center">
                <text
                    class="inline-block border-1 border-yellow-400 text-xs text-yellow-400 pl-4px pr-4px rounded-sm">外带</text>
                <text class="text-sm font-bold ml-5px">华莱士·全鸡汉堡（天河车陂店）</text>
            </view>
            <text class="text-gray-500 text-sm">已完成</text>
        </view>
        <view class="w-full h-90px pt-5px flex items-center justify-between">
            <view class="width-80 h-90px flex items-center overflow-x-auto">
                <view class="w-70px h-70px">
                    <image class="w-60px h-60px ml-5px" src="https://p0.meituan.net/deal/0a0380c1d7bc3b68c978f1c5634e087464061.jpg@180w_164h_1e_1c" mode="aspectFill"></image>
                    <text class="w-full text-center text-xs line-clamp-1 text-gray-400">【宠粉专享】香辣鸡排堡</text>
                </view>
                <view class="w-70px h-70px">
                    <image class="w-60px h-60px ml-5px" src="https://p0.meituan.net/deal/edd369757df7a0d68d8efb1e0825348599160.jpg@180w_164h_1e_1c" mode="aspectFill"></image>
                    <text class="w-full text-center text-xs line-clamp-1 text-gray-400">【热卖】香辣鸡排堡三件套</text>
                </view>
            </view>
            <text class="text-xs text-gray-400">共2件</text>
        </view>
        <view class="w-full flex items-center justify-between mt-10px">
            <text class="text-xs text-gray-500">下单时间：2022-10-11 10:30</text>
            <view class="flex items-end">
                <text class="text-xs text-gray-500 align-bottom">合计</text>
                <text class="text-xs text-black align-bottom">￥</text>
                <text class="text-xs text-black font-bold align-bottom">14</text>
            </view>
        </view>
    </view>
    <view class="width-95 ml-auto mr-auto bg-white rounded-md p-10px box-border mt-10px">
        <view
            class="w-full flex items-center justify-between border-0 border-b-1 border-gray-100 pt-5px pb-5px box-border">
            <view class="flex items-center">
                <text
                    class="inline-block border-1 border-yellow-400 text-xs text-yellow-400 pl-4px pr-4px rounded-sm">外带</text>
                <text class="text-sm font-bold ml-5px">华莱士·全鸡汉堡（天河车陂店）</text>
            </view>
            <text class="text-gray-500 text-sm">已完成</text>
        </view>
        <view class="w-full h-90px pt-5px flex items-center justify-between">
            <view class="width-80 h-90px flex items-center overflow-x-auto">
                <view class="w-70px h-70px">
                    <image class="w-60px h-60px ml-5px" src="https://p0.meituan.net/deal/0a0380c1d7bc3b68c978f1c5634e087464061.jpg@180w_164h_1e_1c" mode="aspectFill"></image>
                    <text class="w-full text-center text-xs line-clamp-1 text-gray-400">【宠粉专享】香辣鸡排堡</text>
                </view>
                <view class="w-70px h-70px">
                    <image class="w-60px h-60px ml-5px" src="https://p0.meituan.net/deal/edd369757df7a0d68d8efb1e0825348599160.jpg@180w_164h_1e_1c" mode="aspectFill"></image>
                    <text class="w-full text-center text-xs line-clamp-1 text-gray-400">【热卖】香辣鸡排堡三件套</text>
                </view>
            </view>
            <text class="text-xs text-gray-400">共2件</text>
        </view>
        <view class="w-full flex items-center justify-between mt-10px">
            <text class="text-xs text-gray-500">下单时间：2022-10-11 10:30</text>
            <view class="flex items-end">
                <text class="text-xs text-gray-500 align-bottom">合计</text>
                <text class="text-xs text-black align-bottom">￥</text>
                <text class="text-xs text-black font-bold align-bottom">14</text>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
// import { onMounted, reactive } from 'vue'
// import hyRequest from '../../service'
// import type { RootObject } from './type.ts/order'
// let orderDetail = reactive({
//     value: {} as RootObject
// })
// onMounted(() => {
// hyRequest
//     .get<RootObject>({
//         url: '/api/weather?cityId=101010100',
//         showLoading: true
//     })
//     .then((res) => {
//         orderDetail.value = res
//     })
// })
</script>

<style>
page {
    background-color: #f5f5f5;
}
</style>